import React, { useMemo, useState } from "react";
import cls from "@/styles/pages/users/Users.module.scss";
import { useUsers } from "@/api/users";
import { UsersTable } from "@/feature/UsersTable/UsersTable";
import { Button } from "@/ui/Button/Button";
import { useNavigate } from "react-router-dom";
import { PaginationI } from "@/models/common";

const Users = () => {
  const [offset, setOffset] = useState(0);
  const params = useMemo(() => {
    return new URLSearchParams({
      limit: "10",
      offset: String(offset),
    });
  }, [offset]);

  const [dataPag, users, isLoading] = useUsers(params);

  const pagination = useMemo<PaginationI>(() => {
    return {
      pageIndex: Math.ceil(offset / 10) + 1,
      pageCount: Math.ceil(dataPag?.count / 10),
      onChange: (num: number) => setOffset((num - 1) * 10),
    };
  }, [offset, dataPag]);
  const navigate = useNavigate();
  return (
    <div className="page-wrapper">
      <div className={cls.header}>
        <div className={cls.title}>Сотрудники</div>
        <Button variant="primary" onClick={() => navigate("/users/create")}>
          Добавить
        </Button>
      </div>
      <UsersTable
        users={users?.filter((u) => !u.is_superuser)}
        isLoading={isLoading}
        pagination={pagination}
      />
    </div>
  );
};

export default Users;
